<template>
  <div class="boxEssential">
    <div>
      <p><router-link :to="{name:'Recommend'}"><span><</span></router-link>必备<img src="../assets/小图标/搜索.png"><img src="../assets/小图标/下载3.png"></p>
    </div>
    <div style="margin: .5rem 0;display: flex">
      <div style="position: fixed;z-index: 100;top: 1.2rem;height: 30rem">
        <ul class="boxAside">
          <li v-for="(item,index) in newessential" :key="index" :class="{active:index === essential}" @click="clicks(index)">
            {{item.title}}
          </li>
        </ul>
      </div>
      <ul class="boxSpanOne" ref="list">
        <li v-for="(item,index) in newessential" :key="index">
          <p>{{item.title}}</p><span>换一换</span>
          <div v-for="(items,index) in item.childlist" :key="index">
            <img :src="items.img">
            <p>{{items.name}}</p>
            <p>{{items.active}}</p>
            <P>{{items.btn}}</P>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Essential",
      data(){
          return{
            getEssential:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/essential",
            newessential:[],
            scrollY:0,
            tops:[]
          }
      },
      methods:{
          gets(){
            axios.get(this.getEssential)
              .then(res=>{
                this.newessential = res.data.essential;
                console.log(this.newessential)
              })
              .catch(error=>{
                console.log(error)
              });
          },
        initTops(){
          let tops=[];
          let top=100;
          tops[0]= 1;
          if (this.$refs.list){
            let lis = this.$refs.list.children;
            Array.prototype.slice.call(lis).forEach((li)=>{
              top = top + li.clientHeight;
              tops.push(top)
            });
            this.tops=tops
          }
        },
        clicks(index){
          const top = this.tops[index];
          document.documentElement.scrollTop = top
        },
      },
      mounted(){
        this.gets();
        /**
         * window的滚动会被注册到整个 vue 中
         * 在这里调用了 initTops()
         * 在别的页面中是没有 this.$refs.list
         * 所以当从这个页面离开的时候一滚动调用 initTops()就会报错
         * 除了在 57 行的方法
         * 可以使用 removeEventListener 在 destroyed生命周期中销毁
         * (自行百度用法)
         */
        window.addEventListener('scroll', () => {
          let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
          this.scrollY = top;
          this.initTops()
          // console.log('我在别的页面触发了')
        })
      },
      // 如果不发生改变就不会触发，且必须返回一个值并在DOM中绑定的才能取得值
      computed: {
        essential() {
          return this.tops.findIndex((top, index) => {
            return this.scrollY >= top && this.scrollY < this.tops[index + 1]
          })
        }
      },
    }
</script>

<style scoped>
@import "../assets/css/essential.css";
</style>
